<script setup>
import { ref, onMounted } from 'vue'


const queryParams = ref({
  style: 0, // 风格
  styleRefUrl: '', // 自定义风格图片
  imageFileUrl: '', // 上传图片
})

// 风格列表
const styleList = ref([
  { id: 0, label: '复古漫画', },
  { id: 1, label: '3D童话', },
  { id: 2, label: '二次元', },
  { id: 3, label: '小清晰', },
  { id: 4, label: '未来科技', },
  { id: 7, label: '炫彩卡通', },
  { id: 8, label: '清雅国风', },
  { id: 9, label: '喜迎新年', },
])
const tabsCurrent = ref(0) // 一级tab选择


function getStyleParams() {
  let data = null
  if (tabsCurrent.value === 0) {
    data = {
      style: queryParams.value.style,
      current: 0,
      styleRefUrl: '',
    }
  } else {
    data = {
      style: -1,
      current: 1,
      styleRefUrl: queryParams.value.styleRefUrl,
    }
  }
  return data
}


// 风格列表选择
function styleItemClick(e) {
  queryParams.value.style = e
}



// 上传图片
function uploadImgFn() {
  uni.chooseImage({
    count: 1,
    success(e) {
      queryParams.value.styleRefUrl = e.tempFilePaths[0]
    }
  })
}

// tabs切换
const tabsChange = (id) => {
  tabsCurrent.value = id
}

defineExpose({
  getStyleParams,
})
</script>

<template>
  <div class='createBgIStyleSelect'>
    <div class="tabs">
      <div class="tab" :class="{ active: tabsCurrent === 0 }" @click="tabsChange(0)">
        风格选择
      </div>
      <div class="tab" :class="{ active: tabsCurrent === 1 }" @click="tabsChange(1)">
        自定义风格
      </div>
    </div>

    <div class="content_box">
      <div class="style-box" v-if="tabsCurrent === 0">
        <div class="style-box-item" v-for="item of styleList" :class="{ active: queryParams.style === item.id }"
          @click="styleItemClick(item.id)">
          <img class="style-img" :src="`https://www.topyunliu.com/imgs/paint/style/${item.label}.png`"
            mode="aspectFill" />
          <p class="style-text">{{ item.label }}</p>
        </div>
      </div>

      <div v-else>
        <div class="title_box">上传风景参考图
          <span class="text">（AI会在参考图基础上,进行绘图）</span>
        </div>

        <!-- 图片上传 -->
        <div class="uploadImg" @click="uploadImgFn">
          <img v-if="queryParams.styleRefUrl" :src="queryParams.styleRefUrl" mode="aspectFill" class="imgSty" alt="">
          <div class="upload_btn" v-else>
            <i class="iconfont ai-icon-shangchuancankaotu"></i>
          </div>
          <div class="delIcon_box" v-if="queryParams.styleRefUrl" @click.stop="queryParams.styleRefUrl = ''">
            <div class="delIcon">
              <i class="iconfont ai-icon-shanchutupian"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.createBgIStyleSelect {
  margin-top: 40rpx;

  .tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;

    .tab {
      width: 335rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 32rpx;
      font-size: 30rpx;
      letter-spacing: 1px;
      text-align: center;
      color: var(--a-three-text-color);
      font-weight: bold;
      border: 2rpx solid transparent;

      &.active {
        border: 2rpx solid var(--a-main-color);
        color: var(--a-main-color);
      }
    }


  }


  .title_box {
    font-size: 28rpx;
    color: var(--a-one-text-color);
    font-weight: bold;
    position: relative;
    padding-left: 30rpx;
    margin-top: 40rpx;
    margin-bottom: 18rpx;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      width: 12rpx;
      height: 18rpx;
      background: var(--a-main-color);
      border-radius: 6rpx;
    }

    .text {
      font-size: 24rpx;
      font-weight: normal;
    }
  }

  .content_box {
    .style-box {
      display: grid;
      grid-template-rows: repeat(2, 220rpx);
      grid-template-columns: repeat(auto-fill, 160rpx);
      grid-column-gap: 17rpx;
      grid-row-gap: 17rpx;
      overflow-x: auto;
      margin-top: 16rpx;


      &::-webkit-scrollbar {
        display: none;
      }

      .style-box-item {
        width: 170rpx;
        height: 214rpx;

        .style-img {
          display: block;
          border: 4rpx solid transparent;
          width: 154rpx;
          height: 154rpx;
          object-fit: contain;
          margin-bottom: 12rpx;
          border-radius: 30rpx;
        }

        .style-text {
          font-size: 24rpx;
          text-align: center;
          color: var(--a-one-text-color);
        }

        &.active {
          .style-img {
            border: 4rpx solid var(--a-main-color);
          }

          .style-text {
            color: var(--a-main-color);
          }
        }
      }


    }

    .uploadImg {
      position: relative;
      box-sizing: border-box;
      width: 160rpx;
      height: 160rpx;
      background: var(--a-main-box-bg-color);
      border-radius: 20rpx;
      margin-top: 22rpx;
      // padding: 16rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .imgSty {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }

      .upload_btn {
        text-align: center;

        .iconfont {
          display: block;
          font-size: 36rpx;
          color: var(--a-main-color);
        }

        .text {
          margin-top: 5rpx;
          font-size: 32rpx;
          color: var(--a-three-text-color);
        }

      }

      .delIcon_box {
        position: absolute;
        top: 0;
        right: 0;
        width: 60rpx;
        height: 60rpx;

        .delIcon {
          position: absolute;
          top: 0;
          right: 0;
          width: 40rpx;
          height: 40rpx;
          background-color: rgba(0, 0, 0, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0 0 0 20rpx;
          box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.3);

          .iconfont {
            font-size: 24rpx;
            color: #fff;
          }
        }
      }

    }
  }
}
</style>